<!DOCTYPE html>

<html>
<head>
  <title>match.js</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
  <link rel="stylesheet" media="all" href="../../../docco.css" />
</head>
<body>
  <div id="container">
    <div id="background"></div>
    
    <ul class="sections">
        
          <li id="title">
              <div class="annotation">
                  <h1>match.js</h1>
              </div>
          </li>
        
        
        
        <li id="section-1">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-1">&#182;</a>
              </div>
              <p>Match nodes are used for the parts of a regular expression between <code>|</code>
symbols. They consist of a series of <a href="./match_fragment.html">MatchFragment</a>
nodes. Optional <code>^</code> and <code>$</code> symbols are also allowed at the beginning and
end of the Match.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>
<span class="hljs-keyword">import</span> util <span class="hljs-keyword">from</span> <span class="hljs-string">'../../util.js'</span>;
<span class="hljs-keyword">import</span> _ <span class="hljs-keyword">from</span> <span class="hljs-string">'lodash'</span>;

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
  <span class="hljs-attr">type</span>: <span class="hljs-string">'match'</span>,

  <span class="hljs-attr">definedProperties</span>: {</pre></div></div>
            
        </li>
        
        
        <li id="section-2">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-2">&#182;</a>
              </div>
              <p>Default anchor is overridden to attach the left point of the anchor to
the first element, and the right point to the last element.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    _anchor: {
      <span class="hljs-attr">get</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
        <span class="hljs-keyword">var</span> start = util.normalizeBBox(<span class="hljs-keyword">this</span>.start.getBBox()),
            end = util.normalizeBBox(<span class="hljs-keyword">this</span>.end.getBBox()),
            matrix = <span class="hljs-keyword">this</span>.transform().localMatrix;

        <span class="hljs-keyword">return</span> {
          <span class="hljs-attr">ax</span>: matrix.x(start.ax, start.ay),
          <span class="hljs-attr">ax2</span>: matrix.x(end.ax2, end.ay),
          <span class="hljs-attr">ay</span>: matrix.y(start.ax, start.ay)
        };
      }
    }
  },</pre></div></div>
            
        </li>
        
        
        <li id="section-3">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-3">&#182;</a>
              </div>
              <p>Renders the match into the currently set container.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  _render() {</pre></div></div>
            
        </li>
        
        
        <li id="section-4">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-4">&#182;</a>
              </div>
              <p>Render each of the match fragments.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    <span class="hljs-keyword">let</span> partPromises = _.map(<span class="hljs-keyword">this</span>.parts, part =&gt; part.render(<span class="hljs-keyword">this</span>.container.group())),
        items = _(partPromises).compact().value();</pre></div></div>
            
        </li>
        
        
        <li id="section-5">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-5">&#182;</a>
              </div>
              <p>Handle the situation where a regular expression of <code>()</code> is rendered.
This leads to a Match node with no fragments. Something must be rendered
so that the anchor can be calculated based on it.</p>
<p>Furthermore, the content rendered must have height and width or else the
anchor calculations fail.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    <span class="hljs-keyword">if</span> (items.length === <span class="hljs-number">0</span>) {
      items = [<span class="hljs-keyword">this</span>.container.group().path(<span class="hljs-string">'M0,0h10'</span>)];
    }

    <span class="hljs-keyword">return</span> <span class="hljs-built_in">Promise</span>.all(items)
      .then(<span class="hljs-function"><span class="hljs-params">items</span> =&gt;</span> {</pre></div></div>
            
        </li>
        
        
        <li id="section-6">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-6">&#182;</a>
              </div>
              <p>Find SVG elements to be used when calculating the anchor.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        <span class="hljs-keyword">this</span>.start = _.first(items);
        <span class="hljs-keyword">this</span>.end = _.last(items);

        util.spaceHorizontally(items, {
          <span class="hljs-attr">padding</span>: <span class="hljs-number">10</span>
        });</pre></div></div>
            
        </li>
        
        
        <li id="section-7">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-7">&#182;</a>
              </div>
              <p>Add lines between each item.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        <span class="hljs-keyword">this</span>.container.prepend(
          <span class="hljs-keyword">this</span>.container.path(<span class="hljs-keyword">this</span>.connectorPaths(items).join(<span class="hljs-string">''</span>)));
      });
  },</pre></div></div>
            
        </li>
        
        
        <li id="section-8">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-8">&#182;</a>
              </div>
              <p>Returns an array of SVG path strings between each item.</p>
<ul>
<li><strong>items</strong> - Array of SVG elements or nodes.</li>
</ul>

            </div>
            
            <div class="content"><div class='highlight'><pre>  connectorPaths(items) {
    <span class="hljs-keyword">let</span> prev, next;

    prev = util.normalizeBBox(_.first(items).getBBox());
    <span class="hljs-keyword">return</span> _.map(items.slice(<span class="hljs-number">1</span>), item =&gt; {
      <span class="hljs-keyword">try</span> {
        next = util.normalizeBBox(item.getBBox());
        <span class="hljs-keyword">return</span> <span class="hljs-string">`M<span class="hljs-subst">${prev.ax2}</span>,<span class="hljs-subst">${prev.ay}</span>H<span class="hljs-subst">${next.ax}</span>`</span>;
      }
      <span class="hljs-keyword">finally</span> {
        prev = next;
      }
    });
  },

  setup() {</pre></div></div>
            
        </li>
        
        
        <li id="section-9">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-9">&#182;</a>
              </div>
              <p>Merged list of MatchFragments to be rendered.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    <span class="hljs-keyword">this</span>.parts = _.reduce(<span class="hljs-keyword">this</span>.properties.parts.elements, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">result, node</span>) </span>{
      <span class="hljs-keyword">var</span> last = _.last(result);

      <span class="hljs-keyword">if</span> (last &amp;&amp; node.canMerge &amp;&amp; last.canMerge) {</pre></div></div>
            
        </li>
        
        
        <li id="section-10">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-10">&#182;</a>
              </div>
              <p>Merged the content of <code>node</code> into <code>last</code> when possible. This also
discards <code>node</code> in the process since <code>result</code> has not been changed.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        last.content.merge(node.content);
      } <span class="hljs-keyword">else</span> {</pre></div></div>
            
        </li>
        
        
        <li id="section-11">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-11">&#182;</a>
              </div>
              <p><code>node</code> cannot be merged with the previous node, so it is added to
the list of parts.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        result.push(node);
      }

      <span class="hljs-keyword">return</span> result;
    }, []);</pre></div></div>
            
        </li>
        
        
        <li id="section-12">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-12">&#182;</a>
              </div>
              <p>When there is only one part, then proxy to the part.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.parts.length === <span class="hljs-number">1</span>) {
      <span class="hljs-keyword">this</span>.proxy = <span class="hljs-keyword">this</span>.parts[<span class="hljs-number">0</span>];
    }
  }
};</pre></div></div>
            
        </li>
        
    </ul>
  </div>
</body>
</html>
